<template>
	<scroll-view class="content" scroll-y="true" @scrolltolower="getMore()">
		<!-- 精选课程 -->
		<view class="popularCoursesList">
			<view class="popularCoursesItem" v-for="(item,index) in popularCourses" :key="index" @click="$navto.navto('/course/info/info',{id:item.id})">
				<image :src="item.cover" class="popularCover"></image>
				<image :src="baseUrl+'tuwen.png'" class="popularType" v-if="item.type=='图文'"></image>
				<image :src="baseUrl+'video.png'" class="popularType" v-else-if="item.type=='视频'"></image>
				<image :src="baseUrl+'voice.png'" class="popularType" v-else-if="item.type=='音频'"></image>
				<image :src="baseUrl+'zhuanlan.png'" class="popularType" v-else-if="item.type=='专栏'"></image>
				<image :src="baseUrl+'live.png'" class="popularType" v-else-if="item.type=='直播'"></image>
				<text class="popularTitle">{{item.name}}</text>
				<block v-if="item.type=='直播'">
					<view class="liveTeacherBox">
						<image :src="baseUrl+'person.png'" class="livePersonIcon"></image>
						<text class="liveTeacherName">导师：{{$teacher(item.teacher_arr)}}</text>
					</view>
					<view class="liveTimeBox">
						<image :src="baseUrl+'time.png'" class="liveTimeIcon"></image>
						<text class="liveTime">{{item.live_time}}</text>
					</view>
				</block>
				<view class="popularNumBox" v-else>
					<image :src="baseUrl+'arrow.png'" class="arrowIcon"></image>
					<text class="peopleLabel">{{item.study_num}}人在学习</text>
					<text class="line1"></text>
					<image :src="baseUrl+'time.png'" class="timeIcon"></image>
					<text class="popularTotal">共{{item.catalogue_count}}讲</text>
				</view>
				<text class="popularPrice" v-if="item.sell_price>0">￥{{item.sell_price}}</text>
				<text class="popularPrice" v-else>免费</text>
				<view class="learnBtn">立即学习</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/course/`,
				popularCourses: [],
				page_no: 1
			}
		},
		onShow() {
			//热门课程
			this.$request.get(`course/course/lists?is_choice=1&page_no=${this.page_no}&page_size=10`).then(res => {
				console.log(res.data);
				this.popularCourses = res.data.data.lists;
			})
		},
		methods: {
			getMore() {
				this.page_no++;
				this.$request.get(`course/course/lists?is_choice=1&page_no=${this.page_no}&page_size=10`).then(res => {
					this.popularCourses.push(...res.data.data.lists);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.liveTimeBox {
		position: absolute;
		top: 81rpx;
		left: 320rpx;
		display: flex;
	
		.liveTimeIcon {
			width: 21rpx;
			height: 21rpx;
		}
	
		.liveTime {
			font-size: 19rpx;
			color: #8e8e8e;
			margin-left: 15rpx;
		}
	}
	
	.liveTeacherBox {
		position: absolute;
		top: 47rpx;
		left: 320rpx;
		display: flex;
	
		.livePersonIcon {
			width: 21rpx;
			height: 20rpx;
		}
	
		.liveTeacherName {
			font-size: 19rpx;
			color: #8e8e8e;
			margin-left: 15rpx;
		}
	}
	.line {
		width: 674rpx;
		height: 1rpx;
		background-color: #dcdcdc;
		margin-top: 70rpx;
	}

	.popularCoursesList {
		width: 674rpx;
		margin-left: 37rpx;

		.popularCoursesItem {
			position: relative;
			width: 674rpx;
			margin-bottom: 45rpx;

			.learnBtn {
				position: absolute;
				width: 128rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background-color: #f08329;
				top: 127rpx;
				right: 37rpx;
				font-size: 22rpx;
				color: #fff;
				line-height: 50rpx;
				text-align: center;
			}

			.popularPrice {
				position: absolute;
				color: #f08329;
				top: 140rpx;
				left: 320rpx;
				font-size: 25rpx;
			}

			.popularNumBox {
				position: absolute;
				width: 100%;
				height: 24rpx;
				left: 320rpx;
				top: 60rpx;
				display: flex;
				align-items: flex-start;

				.arrowIcon {
					width: 22rpx;
					height: 24rpx;
					margin-top: 5rpx;
				}

				.peopleLabel {
					font-size: 19rpx;
					color: #8e8e8e;
					margin-left: 15rpx;
				}

				.line1 {
					width: 1rpx;
					height: 20rpx;
					margin-left: 30rpx;
					background-color: #dcdcdc;
					margin-top: 5rpx;
				}

				.timeIcon {
					width: 21rpx;
					height: 21rpx;
					margin-left: 30rpx;
					margin-top: 5rpx;
				}

				.popularTotal {
					font-size: 19rpx;
					color: #8e8e8e;
					margin-left: 15rpx;
				}
			}

			.popularTitle {
				position: absolute;
				font-size: 25rpx;
				color: #141414;
				top: 0;
				left: 320rpx;
				font-weight: 700;
				width: 400rpx;
				 overflow:hidden;
				  white-space: nowrap;
				  text-overflow: ellipsis;
			}

			.popularType {
				position: absolute;
				width: 68rpx;
				height: 37rpx;
				left: 0;
				top: 0;
			}

			.popularType1 {
				position: absolute;
				width: 73rpx;
				height: 37rpx;
				left: 0;
				top: 0;
			}

			.popularCover {
				width: 271rpx;
				height: 177rpx;
				border-radius: 10rpx;
			}
		}
	}

	.content {
		position: fixed;
		width: 100%;
		height: 94vh;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #fff;
		padding-top: 2vh;
		padding-bottom: 4vh;
	}

	page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff !important;
		padding-bottom: 0 !important;
	}
</style>